<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>班级管理</title>
</head>
<body>
    <div style="width:100%;margin: 0 auto;height: 100%">
        <table id="classd" style="width: 100%;"></table>
        <div id="win" class="easyui-window" title="编辑班级" style="width:350px;height:300px;" data-options="closed:true,modal:true,resizable:false">
            <form id="addUserForm" method="post">
                <table style="width: 100%;height:100%;text-align: center;margin:80px 0px">
                    <tr>
                        <td >班级名称:</td>
                        <td align="left"><input name="user.userName" class="easyui-textbox" type="text" data-options="required:true" /></td>
                </table>
                <div style="text-align: center;margin: 40px">
                    <a id="userSaveBtn" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-ok'">保存</a>
                    &nbsp;&nbsp;
                    <a id="userCancelBtn" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-cancel'">取消</a>
                </div>
            </form>

        </div>
    </div>

    <script>
        $(function () {
            //保存按钮事件
            $("#userSaveBtn").click(function() {
                //配置提交表单的信息
                $("#addUserForm").form({
                    url:'#',
                    success:function(data){
                        if(data =="OK") {
                            //重置表单
                            $("#addUserForm").form('reset');
                            //关闭创建
                            $("#win").window('close');
                            //重新加载表格中的数据，用于显示添加的新数据
                            $("#classd").datagrid('reload');
                        }else {
                            alert("添加失败");
                            //重置表单
                            $("#addUserForm").form('reset');
                            //关闭创建
                            $("#win").window('close');
                        }
                    }
                });
                //提交表单
                $("#addUserForm").submit();
            });

            //取消按钮事件
            $("#userCancelBtn").click(function(){
                $("#win").window('close');//关闭创建的窗口
            });


            $("#classd").datagrid({
                columns:[[
                    {field:'className',title:'班级名称',width:15+'%',align:'center'},
                    {field:'peopleNum',title:'人数',width:10+'%',align:'center'},
                    {field:'groupNum',title:'小组数',width:10+'%',align:'center'},
                    {field:'teachName',title:'教质老师',width:20+'%',align:'center'},
                    {field:'studyName',title:'学术老师',width:20+'%',align:'center'},
                    {field:'operate',title:'操作',width:27+'%',align:'center',formatter:function (value,row,index) {
                        return '<a class="change" href="#" iconCls:"icon-add">编辑</a>';
                    }},
                ]],
               data:[
                    {className:'物联网1402',peopleNum:1,groupNum:20,teachName:'小楚',studyName:'小刚'},
                    {className:'软件技术1502',peopleNum:2,groupNum:20,teachName:'小旭',studyName:'q'},
                    {className:'软件技术1503',peopleNum:3,groupNum:20,teachName:'小刚',studyName:'q'},
                    {className:'软件技术1504',peopleNum:4,groupNum:20,teachName:'小炮',studyName:'小楚'},
                    {className:'物联网1501',peopleNum:5,groupNum:20,teachName:'小雷',studyName:'q'},
                ],
                pagination:true,//在表格下方添加分页工具栏
                pageList:[5,10,15,20],
                pageNumber:1,
                pageSize:5
            });
            $("a.change").linkbutton().click(function () {
                $("#win").window('open');//打开指定窗口
            });
        })
    </script>
</body>
</html>